import React, { Component } from 'react'
import { FileExcelOutlined,FileSearchOutlined, PrinterOutlined,LinkOutlined,EnvironmentOutlined } from "@ant-design/icons"
import { mediator } from '@comm/mediator'
import { tabs } from '@router/config'

interface IProps { }
interface IStates { }

export default class QuickEntry extends Component<IProps, IStates>{
    private quickEntry: any[] = [
        {
            icon: <FileExcelOutlined style={{ fontSize: "30px", color: "#4286ff" }} />,
            title: "食品信息",
            comCode:"goodInfo",
        },
        {
            icon: <FileSearchOutlined style={{ fontSize: "30px", color: "#4286ff" }} />,
            title: "原料管理",
            comCode:'goodSource'
        },
        {
            icon: <PrinterOutlined style={{ fontSize: "30px", color: "#4286ff" }} />,
            title: "质量检测",
            comCode:"goodInspect"
        },
        {
            icon: <EnvironmentOutlined style={{ fontSize: "30px", color: "#4286ff" }} />,
            title: "物流信息",
            comCode:"moveInfo"
        }
    ]
    public clickItem = (item:any) => {
        item.component = tabs[item.comCode]
        item.value = item.title
        mediator.emit("createTab",item)
    }
    public render() {
        return (
            <div className="crm-home-quick-entry">
                <div className="crm-quick-entry-header">
                    <div className="crm-quick-entry-title">
                        <LinkOutlined style={{ color: "#4286ff" }} />
                        <span style={{ marginLeft: "10px" }}>快捷入口</span>
                    </div>
                    <div style={{ color: "#4286ff", cursor: "pointer" }}>编辑</div>
                </div>
                <div className="crm-quicky-entry-content">
                    {this.quickEntry.map((item: any, i: number) => {
                        return (
                            <div className="crm-qe-item" key={i} onClick={() => {
                                this.clickItem(item)
                            }}>
                                <div className="item-icon">
                                    {item.icon}
                                </div>
                                <div className="item-title">
                                    {item.title}
                                </div>
                            </div>
                        )
                    })}
                </div>
            </div>
        )
    }
}